<template>
  <yd-ls-box>
    <yd-ls-layout :title="title" :onfoot=false  :tolfurl="urls" torgtxt="列表" @handle-rgtxt-button="showlist">
      <div class="yd-ls-height"></div>
      <yd-cell-group v-if="!billCaseDetail.is_electron">
        <div class="yd-ls-billcase-hospital-name">{{ billCaseDetail.hospital_name }}</div>
        <yd-cell-item  class="yd-ls-billcase-cell-item">
          <span slot="left">{{ billCaseDetail.docter_name }} &nbsp;{{ billCaseDetail.title }}</span>
          <span slot="right">{{ billCaseDetail.rcd_time }}</span>
        </yd-cell-item>
        <yd-cell-item class="yd-ls-billcase-cell-list yd-ls-billcase-cell-details">
          <span slot="left">主述</span>
        </yd-cell-item>
        <div class="yd-ls-billcase-details" >
          <p>{{ billCaseDetail.rcd_result || "暂无数据" }}</p>
        </div>

        <yd-cell-item class="yd-ls-billcase-cell-list">
          <span slot="left" style="padding-right: .48rem;font-weight: 600;">临床诊断</span>
          <span slot="right">{{ billCaseDetail.check_result }}</span>
        </yd-cell-item>

      </yd-cell-group>

      <yd-cell-group v-if="billCaseDetail.is_electron">

        <div class="yd-ls-billcase-patient">
					<yd-flexbox direction="vertical">
						<yd-flexbox-item>
							<yd-flexbox>
								<yd-flexbox-item>编号：<span v-text="billCaseDetail.code"></span></yd-flexbox-item>
								<yd-flexbox-item>时间：<span v-text="billCaseDetail.rcd_time"></span></yd-flexbox-item>
							</yd-flexbox>
						</yd-flexbox-item>
						<yd-flexbox-item>
							<yd-flexbox>
								<yd-flexbox-item>姓名：<span v-text="billCaseDetail.member_name"></span></yd-flexbox-item>
								<yd-flexbox-item>性别：<span v-text="billCaseDetail.gender"></span></yd-flexbox-item>
							</yd-flexbox>
						</yd-flexbox-item>
						<yd-flexbox-item>
							<yd-flexbox>
								<yd-flexbox-item>年龄：<span v-text="billCaseDetail.age"></span></yd-flexbox-item>
								<yd-flexbox-item>地区：<span v-text="billCaseDetail.region"></span></yd-flexbox-item>
							</yd-flexbox>
						</yd-flexbox-item>
					</yd-flexbox>
				</div>
        
				<yd-cell-group class="yd-ls-billcase-patient-sick">
					<yd-cell-item type="label">
						<span slot="left" style="padding-right: .48rem;font-weight: 600;">临床诊断</span>
						<span slot='right' class="yd-ls-billcase-patient-sick-con">
              <i>{{billCaseDetail.check_result}}</i>
            </span>
            
					</yd-cell-item>
				</yd-cell-group>
      </yd-cell-group>

      <yd-ls-title lftit="用药建议"  v-if="!billCaseDetail.is_electron"></yd-ls-title>
      <div class="yd-ls-bill-case-rp"  v-if="billCaseDetail.is_electron">Rp</div>
      <yd-cell-group>
        <span v-for="(items,index) in billCaseDetail.drug_use" :key="index">
          <yd-cell-item class=" yd-ls-billcase-cell-details">
            <span slot="left">{{index+1}}. {{ items.drug_name }}</span>
            <span slot="right">{{ items.qty }}盒</span>
          </yd-cell-item>
          <div class="yd-ls-billcase-details" >
            <p>{{ items.dosage }}</p>
            <p v-if="items.remark">{{ items.remark }}</p>
          </div>
        </span>
        <div class="yd-ls-bill-case-seal-box" v-if="billCaseDetail.is_electron">
          <span class="m-patient-note-details-label">
						<span>医生：<em>{{billCaseDetail.docter_name}}</em></span>
						<p>{{title}}</p>
						<span>{{billCaseDetail.rcd_time}}</span>
					</span>
        </div>
      </yd-cell-group>
      <div class="m-patient-note-details-ft"  v-if="billCaseDetail.is_electron">
        <yd-flexbox>
          <div class="left-item">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;师：<span v-text="billCaseDetail.docter_name"></span></div>
          <yd-flexbox-item>调配药师/士：<span v-text="billCaseDetail.allocate_drname"></span></yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
          <div class="left-item">审核药师：<span v-text="billCaseDetail.check_drname"></span></div>
          <yd-flexbox-item>核对、发药药师：<span v-text="billCaseDetail.medicine_drname"></span></yd-flexbox-item>
        </yd-flexbox>
      </div>

      <yd-popup v-model="showitem" position="right">
        <yd-ls-popup-header :noarrow=false headname="病历列表"></yd-ls-popup-header>
        <yd-cell-group
          class="yd-ls-billcase-detail"
          v-for="(items,index) in billCaseYear"
          :title="items.year"
          :key="index">
          <yd-cell-item type="radio" v-for="list in items.items" :key="list.id">
            <span slot="left">{{ list.month_day }}</span>
            <input slot="right" type="radio" :value="items.year + '年' + list.month_day" v-model="picked" @click="pickYear(list.id)"/>
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>

    </yd-ls-layout>
    <yd-ls-flex-button class="yd-ls-bill-double-btn">
      <yd-flexbox>
        <yd-flexbox-item v-if="imgLen && !billCaseDetail.is_electron">
          <yd-ls-checkpic-button style="position:relative" :imglist="billCaseDetail.files"></yd-ls-checkpic-button>
        </yd-flexbox-item>
        <yd-button v-if="billCaseDetail.recipe_id>0 && billCaseDetail.is_electron"  bgcolor="rgb(72, 112, 243)" color="#ffffff" @click.native="goBuyCart" style="width:100%;"><yd-icon color="#FFF" size=".38rem" name="shopcart"></yd-icon>去购买</yd-button>
      </yd-flexbox>
    </yd-ls-flex-button>
  </yd-ls-box>
</template>

<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsTitle from '../../../components/yd-ls-title.vue'
  import ydLsPopupHeader from '../../../components/yd-ls-popup-header.vue'
  import ydLsCheckpicButton from '../../../components/yd-ls-checkpic-button.vue'
  import ydLsFlexButton from '../../../components/yd-ls-flexbutton.vue'
  import api from '../../../axios/api'

  export default {
    name: 'billcase',
    data() {
      return {
        urls: '',
        title: '病历详情',
        showitem: false,
        picked: '',
        billcase: {},
        datelist: [],
        jianyi: [],
        imglist: [],
        imgLen: 0,
        billCaseDetail: [],
        billCaseYear: []
      }
    },
    created() {

      //TODO: 从公众号进时，检查openid
      if(this.$route.query.openid){
        localStorage.openId = this.$route.query.openid
      }

      //TODO:初始化数据
      let getId = this.$route.query.cid
      let psize = (this.$route.query.casesize*1) * (this.$route.query.caseindex*1)
      let type = this.$route.query.type
      if(!type) {
        this.urls = `index.html#/bill?casesize=${psize}`
      }else{
        this.urls = `subscribedetail.html`
      }

      sessionStorage.isbillpic = 0

      this.$nextTick(()=>{
        this.getCaseDetail(getId)
      })
      
    },
    methods: {
      init() {
      },
      getCaseDetail(id) {
        let navbar_class = document.getElementsByClassName('yd-navbar-center-box')[0]
        let title_class = document.getElementsByClassName('yd-navbar-center-title')[0]
        
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.bill_case_detail, {params:{id: id}})
          .then(m=>{
            let bill_case_detail_data = m.data
            this.billCaseDetail = bill_case_detail_data.data
            this.imgLen = this.billCaseDetail.files.length

            if (this.billCaseDetail.is_electron) {
              this.title = this.billCaseDetail.channel == 0 ? `广州东泰医疗门诊部处方笺` : `遵义汇川快问互联网医院电子处方单`
              title_class.style.fontSize = '.3rem'
              if(this.billCaseDetail.channel != 0) {
                navbar_class.style.width = '65%'
                navbar_class.style.marginLeft = '12%'
              }
              
            } else {
              this.title = '病历详情'
            }
            this.getCaseYear(id)
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: '病历详情=' + JSON.stringify(err)})
          })
      },
      getCaseYear(id) {
        this.axios.get(api.bill_case_year, {})
          .then(m=>{
            let bill_case_year_data = m.data
            this.billCaseYear = bill_case_year_data.data

            for(let item of this.billCaseYear[0].items) {
              if(item.id == id) {
                this.picked = this.billCaseYear[0].year + '年' + item.month_day
              }
            }
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: '病历列表=' + JSON.stringify(err)})
          })
      },
      showlist () {
        this.showitem = true
      },
      pickYear(id) {
        this.getCaseDetail(id)
      },
      goBuyCart(){
        window.location.href = `${api.shop_host}/TopMallWeb/mOrderAction!goMyCart.action?openid=${localStorage.openId}&ramid=${new Date()}`
      }
    },
    mounted() {
      this.init()
    },
    watch: {
      picked(newVal, oldVal){
        console.log('new='+newVal+'old='+oldVal)
      }
    },
    components: { ydLsBox, ydLsLayout, ydLsTitle, ydLsPopupHeader, ydLsCheckpicButton, ydLsFlexButton }


  }
</script>

<style>
  .yd-ls-bill-case-seal-box {
    padding: 30px 0;
  }
  .yd-ls-bill-case-seal-box .yd-ls-bill-case-seal {
    float: right;
    border: 1px solid red;
    margin: 0 10px;
    padding: 10px 20px;
    text-align: center;
    color: red;
  }
  .yd-ls-bill-case-seal-box:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .yd-ls-bill-case-seal-box .yd-ls-bill-case-seal span {
    display: block;
    font-size: .26rem;
    line-height: .35rem;
  }
  .yd-ls-bill-case-rp {
    background-color: #fff;
    line-height: .5rem;
    font-size: .4rem;
    font-weight: bold;
    padding-top: .3rem;
    padding-left: .3rem;
  }
  .yd-ls-billcase-cell-item:not(:last-child):after {
    border-bottom: 2px solid #d9d9d9;
    margin-left: 0;
  }
  .yd-ls-billcase-detail {
    margin-bottom: 0;
  }
  .yd-ls-billcase-detail .yd-cell-title {
    padding-top: .1rem
  }
  .yd-ls-billcase-detail .yd-cell-left span span {
    display: inline-block;
    width: 1.2rem;
  }

  .yd-ls-billcase-hospital-name {
    font-size: .36rem;
    font-weight: 600;
    padding: .3rem .3rem 0 .3rem;
  }
  .yd-ls-billcase-cell-details:not(:last-child):after {
    height: 0;
  }
  .yd-ls-billcase-details {
    padding-left: .24rem;
    line-height: .6rem;
    color: #555;
  }
  .yd-ls-billcase-details:after {
    display: block;
    content: "";
    width: 100%;
    font-size: .3rem;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .yd-ls-billcase-details input {
    border: 0;
  }
  .yd-ls-billcase-details p {
    padding: 0 .1rem;
    padding-bottom: .1rem;
    line-height: .4rem;
    font-size: .26rem;
    color: #999;
  }
  .yd-ls-billcase-cell-list .yd-cell-left span:nth-child(2),
  .yd-ls-billcase-patient-sick  .yd-cell-left span:nth-child(2) {
    padding-right: .48rem;
    font-weight: 600;
  }
  .yd-ls-billcase-cell-details .yd-cell-left span:nth-child(2) {
    padding-right: .1rem
  }
  .yd-ls-billcase-cell-list .yd-cell-right {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }

  .yd-ls-bill-double-btn .yd-btn-block {
    margin-top: inherit;
  }

  
.yd-ls-billcase-patient .yd-flexbox-vertical{
  padding: 0.16rem;
  background-color: #fff;
  border-bottom: 1px solid #dfdfdf;
}
.yd-ls-billcase-patient .yd-flexbox-item-center{
  line-height: 0.54rem;
  color: #303030;
  font-size: .3rem;
  padding-left: 0.05rem;
}
.yd-ls-billcase-patient .yd-flexbox-item-center span{
  color: #303030;
  font-size: 0.28rem;
}
.yd-ls-billcase-patient-sick .yd-cell-left .yd-cell-icon{
	display: none;
}
.yd-ls-billcase-patient-sick .yd-cell-right{
  text-align: left; 
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.yd-ls-billcase-patient-sick .yd-ls-billcase-patient-sick-con i {
  display: inline-block;
  margin: 5px 0;
  margin-right: 10px;
  padding: 5px 8px;
  background-color: lavender;
  white-space: normal;
  max-width: 160px;
  border-radius: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.m-patient-add-note-bd .yd-cell-title{
	background-color: #fff;
	font-size: 0.42rem;
	color: #303030;
	padding: 0.24rem;
	font-weight: bold;
}
.m-patient-add-note-bd .yd-cell-title:after{
	border-bottom: 0;
}
.m-patient-add-note-bd .yd-cell-icon{
	margin-right: 0.2rem;
}
.m-patient-add-note-bd .yd-cell-left,
.m-patient-add-note-ft .yd-cell-left{
	white-space: initial;
}

.m-patient-add-note-bd .yd-cell-item span.yd-cell-icon+span{
	padding: 0.16rem 0.24rem;
}
.m-patient-add-note-bd .yd-cell-item span.yd-cell-icon+span p{
	font-size: 0.28rem;
	line-height: 0.48rem;
	max-width: 4.92rem;
	text-overflow:ellipsis; 
	overflow:hidden;
	white-space:nowrap
}
.m-patient-add-note-bd .yd-cell-item span.yd-cell-icon+span p:first-child{
	font-size: 0.32rem;
	font-weight: 600;
}
.m-patient-add-note-bd .yd-cell-item span.yd-cell-icon+span p:last-child{
	font-size: 0.26rem;
	color: #919191;
}
.m-patient-add-note-btn{
	margin-top: 0;
}
.m-patient-add-note-btn span{
	line-height: 0.6rem;
	display: inline-block;
	position: relative;
	top: -0.08rem;
}

.m-patient-add-note-ft .yd-cell-item{
	padding: 0.16rem 0.24rem;
}
.m-patient-add-note-ft .yd-cell-left span span{
	font-size: 0.32rem;
}
.m-patient-add-note-ft .yd-cell-left span p{
	font-size: 0.28rem;
	line-height: 0.48rem;
	padding-top: 0.12rem;
}

.m-patient-note-details-ft{
	padding: 0.12rem;
	background-color: #fff;
	border-top: 1px solid #dfdfdf;
}
.m-patient-note-details-ft em{
	margin-left: 0.58rem;
}
.m-patient-note-details-ft i{
	margin: 0.12rem;
}
.m-patient-note-details-ft .left-item{
	font-size: 0.3rem;
	width: 3.2rem;
}

.m-patient-note-details-ft .yd-flexbox:nth-of-type(1){
	padding-bottom: 0.16rem;
}
.m-patient-note-details-ft .yd-flexbox-item.yd-flexbox-item-center{
	font-size: 0.3rem;
}
.m-patient-note-details{
	background-color: #fff;
	overflow: hidden;
}
.m-patient-note-details-label{
	float: right;
	text-align: center;
	padding: 0.24rem;
	color: #f06a67;
	border: 1px solid #f06a67;
	margin: 0.24rem;
	font-size: 0.26rem;
}
.m-patient-note-details-label p{
	line-height: 0.58rem;
}

</style>